<template>
  <div class="help-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>系统帮助</h3>
          <div class="header-actions">
            <el-button type="primary" @click="showFeedbackDialog">
              <el-icon><ChatDotRound /></el-icon>
              意见反馈
            </el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20">
        <!-- 左侧导航 -->
        <el-col :span="6">
          <el-card class="help-nav">
            <template #header>
              <span>帮助导航</span>
            </template>
            <el-menu
              :default-active="activeSection"
              class="help-menu"
              @select="handleMenuSelect"
            >
              <el-menu-item index="overview">
                <el-icon><InfoFilled /></el-icon>
                <span>系统概述</span>
              </el-menu-item>
              <el-menu-item index="getting-started">
                <el-icon><Guide /></el-icon>
                <span>快速开始</span>
              </el-menu-item>
              <el-menu-item index="user-guide">
                <el-icon><User /></el-icon>
                <span>用户指南</span>
              </el-menu-item>
              <el-menu-item index="features">
                <el-icon><Star /></el-icon>
                <span>功能特性</span>
              </el-menu-item>
              <el-menu-item index="faq">
                <el-icon><QuestionFilled /></el-icon>
                <span>常见问题</span>
              </el-menu-item>
              <el-menu-item index="troubleshooting">
                <el-icon><Tools /></el-icon>
                <span>故障排除</span>
              </el-menu-item>
              <el-menu-item index="contact">
                <el-icon><Phone /></el-icon>
                <span>联系我们</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </el-col>

        <!-- 右侧内容 -->
        <el-col :span="18">
          <el-card class="help-content">
            <!-- 系统概述 -->
            <div v-if="activeSection === 'overview'" class="content-section">
              <h2>系统概述</h2>
              <p>大型ERP管理系统是一个功能完整的企业资源规划系统，集成了采购、销售、库存、财务等核心业务模块。</p>
              
              <h3>主要特点</h3>
              <ul>
                <li><strong>模块化设计</strong>：采用模块化架构，各功能模块独立且可扩展</li>
                <li><strong>权限管理</strong>：基于角色的权限控制系统，确保数据安全</li>
                <li><strong>工作流审批</strong>：支持多级审批流程，提高工作效率</li>
                <li><strong>数据可视化</strong>：丰富的图表和报表，直观展示业务数据</li>
                <li><strong>移动端适配</strong>：响应式设计，支持移动办公</li>
              </ul>

              <h3>技术架构</h3>
              <div class="tech-stack">
                <el-tag type="primary">Vue 3</el-tag>
                <el-tag type="success">Element Plus</el-tag>
                <el-tag type="warning">Pinia</el-tag>
                <el-tag type="info">Vue Router</el-tag>
                <el-tag type="danger">ECharts</el-tag>
              </div>
            </div>

            <!-- 快速开始 -->
            <div v-if="activeSection === 'getting-started'" class="content-section">
              <h2>快速开始</h2>
              
              <h3>1. 系统登录</h3>
              <p>使用管理员账户登录系统：</p>
              <ul>
                <li>用户名：admin</li>
                <li>密码：123456</li>
              </ul>

              <h3>2. 基础配置</h3>
              <ol>
                <li>进入<strong>系统管理 → 系统设置</strong>，配置企业基本信息</li>
                <li>设置<strong>业务参数</strong>，如默认仓库、币种等</li>
                <li>配置<strong>安全策略</strong>，如密码复杂度、会话超时等</li>
              </ol>

              <h3>3. 数据导入</h3>
              <p>使用数据导入功能导入基础数据：</p>
              <ul>
                <li>商品信息</li>
                <li>供应商信息</li>
                <li>客户信息</li>
                <li>用户信息</li>
              </ul>

              <h3>4. 开始使用</h3>
              <p>完成基础配置后，您可以开始使用各个业务模块：</p>
              <ul>
                <li>创建采购订单</li>
                <li>管理库存</li>
                <li>处理销售订单</li>
                <li>查看财务报表</li>
              </ul>
            </div>

            <!-- 用户指南 -->
            <div v-if="activeSection === 'user-guide'" class="content-section">
              <h2>用户指南</h2>
              
              <h3>系统管理</h3>
              <div class="guide-section">
                <h4>用户管理</h4>
                <p>在<strong>系统管理 → 用户管理</strong>中，您可以：</p>
                <ul>
                  <li>添加、编辑、删除用户</li>
                  <li>分配用户角色和权限</li>
                  <li>重置用户密码</li>
                  <li>启用/禁用用户账户</li>
                </ul>
              </div>

              <div class="guide-section">
                <h4>角色管理</h4>
                <p>在<strong>系统管理 → 角色管理</strong>中，您可以：</p>
                <ul>
                  <li>创建自定义角色</li>
                  <li>配置角色权限</li>
                  <li>设置角色层级关系</li>
                </ul>
              </div>

              <h3>业务操作</h3>
              <div class="guide-section">
                <h4>采购管理</h4>
                <p>采购管理模块包含以下功能：</p>
                <ul>
                  <li><strong>供应商管理</strong>：维护供应商信息</li>
                  <li><strong>采购订单</strong>：创建和管理采购订单</li>
                  <li><strong>采购入库</strong>：处理商品入库</li>
                  <li><strong>采购退货</strong>：处理退货流程</li>
                </ul>
              </div>

              <div class="guide-section">
                <h4>销售管理</h4>
                <p>销售管理模块包含以下功能：</p>
                <ul>
                  <li><strong>客户管理</strong>：维护客户信息</li>
                  <li><strong>销售订单</strong>：创建和管理销售订单</li>
                  <li><strong>销售出库</strong>：处理商品出库</li>
                  <li><strong>销售退货</strong>：处理退货流程</li>
                </ul>
              </div>
            </div>

            <!-- 功能特性 -->
            <div v-if="activeSection === 'features'" class="content-section">
              <h2>功能特性</h2>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card class="feature-card">
                    <template #header>
                      <span>权限管理</span>
                    </template>
                    <ul>
                      <li>基于角色的权限控制</li>
                      <li>细粒度权限设置</li>
                      <li>权限继承机制</li>
                      <li>操作日志记录</li>
                    </ul>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card class="feature-card">
                    <template #header>
                      <span>工作流审批</span>
                    </template>
                    <ul>
                      <li>多级审批流程</li>
                      <li>条件审批支持</li>
                      <li>审批状态跟踪</li>
                      <li>审批意见记录</li>
                    </ul>
                  </el-card>
                </el-col>
              </el-row>

              <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="12">
                  <el-card class="feature-card">
                    <template #header>
                      <span>数据管理</span>
                    </template>
                    <ul>
                      <li>数据导入导出</li>
                      <li>数据备份恢复</li>
                      <li>数据验证机制</li>
                      <li>数据统计分析</li>
                    </ul>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card class="feature-card">
                    <template #header>
                      <span>系统监控</span>
                    </template>
                    <ul>
                      <li>系统性能监控</li>
                      <li>错误日志记录</li>
                      <li>用户行为分析</li>
                      <li>资源使用统计</li>
                    </ul>
                  </el-card>
                </el-col>
              </el-row>
            </div>

            <!-- 常见问题 -->
            <div v-if="activeSection === 'faq'" class="content-section">
              <h2>常见问题</h2>
              
              <el-collapse v-model="activeFaq">
                <el-collapse-item title="如何重置用户密码？" name="1">
                  <p>在<strong>系统管理 → 用户管理</strong>中，找到需要重置密码的用户，点击"重置密码"按钮即可。</p>
                </el-collapse-item>
                
                <el-collapse-item title="如何创建新的角色？" name="2">
                  <p>在<strong>系统管理 → 角色管理</strong>中，点击"新增角色"按钮，填写角色信息并配置权限。</p>
                </el-collapse-item>
                
                <el-collapse-item title="如何导入数据？" name="3">
                  <p>在各个管理页面中，点击"导入数据"按钮，选择CSV或JSON格式的文件进行导入。</p>
                </el-collapse-item>
                
                <el-collapse-item title="如何查看系统日志？" name="4">
                  <p>在<strong>系统管理 → 系统监控</strong>中，可以查看系统错误日志和性能数据。</p>
                </el-collapse-item>
                
                <el-collapse-item title="如何配置审批流程？" name="5">
                  <p>在<strong>系统管理 → 审批管理</strong>中，可以配置不同类型的审批流程和审批人。</p>
                </el-collapse-item>
                
                <el-collapse-item title="如何备份数据？" name="6">
                  <p>在<strong>系统管理 → 数据备份</strong>中，可以创建完整备份、增量备份或差异备份。</p>
                </el-collapse-item>
              </el-collapse>
            </div>

            <!-- 故障排除 -->
            <div v-if="activeSection === 'troubleshooting'" class="content-section">
              <h2>故障排除</h2>
              
              <h3>常见问题及解决方案</h3>
              
              <div class="troubleshooting-item">
                <h4>登录失败</h4>
                <p><strong>问题描述</strong>：无法登录系统</p>
                <p><strong>解决方案</strong>：</p>
                <ul>
                  <li>检查用户名和密码是否正确</li>
                  <li>确认账户是否被禁用</li>
                  <li>清除浏览器缓存和Cookie</li>
                  <li>联系系统管理员</li>
                </ul>
              </div>

              <div class="troubleshooting-item">
                <h4>页面加载缓慢</h4>
                <p><strong>问题描述</strong>：页面响应速度慢</p>
                <p><strong>解决方案</strong>：</p>
                <ul>
                  <li>检查网络连接</li>
                  <li>清除浏览器缓存</li>
                  <li>关闭不必要的浏览器标签页</li>
                  <li>联系技术支持</li>
                </ul>
              </div>

              <div class="troubleshooting-item">
                <h4>数据导入失败</h4>
                <p><strong>问题描述</strong>：导入数据时出现错误</p>
                <p><strong>解决方案</strong>：</p>
                <ul>
                  <li>检查文件格式是否正确</li>
                  <li>确认数据格式是否符合要求</li>
                  <li>检查必填字段是否完整</li>
                  <li>查看错误日志获取详细信息</li>
                </ul>
              </div>

              <div class="troubleshooting-item">
                <h4>权限不足</h4>
                <p><strong>问题描述</strong>：无法访问某些功能</p>
                <p><strong>解决方案</strong>：</p>
                <ul>
                  <li>联系管理员分配相应权限</li>
                  <li>检查角色权限配置</li>
                  <li>确认用户角色分配</li>
                </ul>
              </div>
            </div>

            <!-- 联系我们 -->
            <div v-if="activeSection === 'contact'" class="content-section">
              <h2>联系我们</h2>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card>
                    <template #header>
                      <span>技术支持</span>
                    </template>
                    <div class="contact-info">
                      <p><strong>技术支持邮箱</strong>：support@example.com</p>
                      <p><strong>技术支持电话</strong>：400-123-4567</p>
                      <p><strong>工作时间</strong>：周一至周五 9:00-18:00</p>
                      <p><strong>响应时间</strong>：24小时内回复</p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card>
                    <template #header>
                      <span>商务合作</span>
                    </template>
                    <div class="contact-info">
                      <p><strong>商务邮箱</strong>：business@example.com</p>
                      <p><strong>商务电话</strong>：400-123-4568</p>
                      <p><strong>工作时间</strong>：周一至周五 9:00-18:00</p>
                      <p><strong>响应时间</strong>：48小时内回复</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <div class="feedback-section">
                <h3>意见反馈</h3>
                <p>如果您在使用过程中遇到问题或有改进建议，请通过以下方式联系我们：</p>
                <ul>
                  <li>发送邮件到 feedback@example.com</li>
                  <li>在系统中提交意见反馈</li>
                  <li>联系在线客服</li>
                </ul>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 意见反馈对话框 -->
    <el-dialog
      v-model="feedbackDialogVisible"
      title="意见反馈"
      width="600px"
    >
      <el-form :model="feedbackForm" :rules="feedbackRules" ref="feedbackFormRef" label-width="100px">
        <el-form-item label="反馈类型" prop="type">
          <el-select v-model="feedbackForm.type" placeholder="请选择反馈类型" style="width: 100%">
            <el-option label="功能建议" value="suggestion" />
            <el-option label="问题报告" value="bug" />
            <el-option label="使用咨询" value="question" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="标题" prop="title">
          <el-input v-model="feedbackForm.title" placeholder="请输入反馈标题" />
        </el-form-item>
        
        <el-form-item label="详细描述" prop="description">
          <el-input
            v-model="feedbackForm.description"
            type="textarea"
            :rows="6"
            placeholder="请详细描述您的反馈内容"
          />
        </el-form-item>
        
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="feedbackForm.contact" placeholder="请输入您的联系方式（邮箱或电话）" />
        </el-form-item>
        
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="feedbackForm.priority" placeholder="请选择优先级" style="width: 100%">
            <el-option label="低" value="low" />
            <el-option label="中" value="medium" />
            <el-option label="高" value="high" />
            <el-option label="紧急" value="urgent" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="feedbackDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFeedback" :loading="feedbackLoading">
          提交反馈
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeSection = ref('overview')
const activeFaq = ref(['1'])
const feedbackDialogVisible = ref(false)
const feedbackLoading = ref(false)
const feedbackFormRef = ref()

// 意见反馈表单
const feedbackForm = reactive({
  type: '',
  title: '',
  description: '',
  contact: '',
  priority: 'medium'
})

// 表单验证规则
const feedbackRules = {
  type: [
    { required: true, message: '请选择反馈类型', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入反馈标题', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入详细描述', trigger: 'blur' }
  ],
  contact: [
    { required: true, message: '请输入联系方式', trigger: 'blur' }
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' }
  ]
}

// 方法
const handleMenuSelect = (index) => {
  activeSection.value = index
}

const showFeedbackDialog = () => {
  feedbackDialogVisible.value = true
  resetFeedbackForm()
}

const submitFeedback = async () => {
  if (!feedbackFormRef.value) return
  
  try {
    await feedbackFormRef.value.validate()
    feedbackLoading.value = true
    
    // 模拟提交反馈
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('反馈提交成功，我们会尽快处理')
    feedbackDialogVisible.value = false
    
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    feedbackLoading.value = false
  }
}

const resetFeedbackForm = () => {
  Object.assign(feedbackForm, {
    type: '',
    title: '',
    description: '',
    contact: '',
    priority: 'medium'
  })
  feedbackFormRef.value?.clearValidate()
}
</script>

<style scoped>
.help-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.help-nav {
  height: fit-content;
}

.help-menu {
  border-right: none;
}

.help-content {
  min-height: 600px;
}

.content-section h2 {
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409EFF;
}

.content-section h3 {
  color: #606266;
  margin: 20px 0 15px 0;
}

.content-section h4 {
  color: #606266;
  margin: 15px 0 10px 0;
}

.content-section p {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 15px;
}

.content-section ul {
  margin-bottom: 15px;
  padding-left: 20px;
}

.content-section li {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 8px;
}

.tech-stack {
  margin: 20px 0;
}

.tech-stack .el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.guide-section {
  margin-bottom: 25px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.feature-card {
  margin-bottom: 20px;
}

.feature-card ul {
  margin: 0;
  padding-left: 20px;
}

.feature-card li {
  margin-bottom: 8px;
  color: #606266;
}

.troubleshooting-item {
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #409EFF;
}

.troubleshooting-item h4 {
  color: #303133;
  margin-bottom: 10px;
}

.contact-info p {
  margin-bottom: 10px;
  color: #606266;
}

.feedback-section {
  margin-top: 30px;
  padding: 20px;
  background: #f0f9ff;
  border-radius: 4px;
  border: 1px solid #b3d8ff;
}

.feedback-section h3 {
  color: #409EFF;
  margin-bottom: 15px;
}
</style>
